﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Destination PDF Test.</title>
    <style type="text/css">        
        body{background:#2C2C2C;margin:0px;top:0px;left:0px;font-family:Calibri,Microsoft Sans-Serif Serif,Tahoma;font-style:normal;font-weight:normal;font-size:12px;color:#171717;}
        .template{background:#E8E8E8;min-width:900px;width:90%;min-height:450px;height:auto;border:1px dotted #A4A2A2;margin-top:2%;padding-bottom:25px;}
        .template .titleTemp{color:#E04E06;font-size:16px;font-weight:bold;text-align:left;margin-top:2.5%;min-width:550px;width:95%}
        .template .sample{background:#FFFFFF;min-width:850px;width:95%;min-height:575px;border:1px dotted #A4A2A2;padding-bottom:25px;}
        .template .content{background:#FFFFFF;min-width:550px;width:95%;margin-top:2.5%;min-height:50px;border:1px dotted #A4A2A2;padding-bottom:25px;}        
    </style>       
    <link href="../Styles/IndustrialDashboard.css" rel="stylesheet" type="text/css" />
     <!--Look the src of styles included files. They are relative.
        The HTMLShot DLL work to convert them to full uri path.-->
    <link href="../Addons/DestinationPDF/Styles/DestinationPDF.css" rel="stylesheet" type="text/css" />
    <link href="../Widgets/IndustrialGrid/Styles/IndustrialGrid.css" rel="stylesheet" type="text/css" />



    <script src="../Scripts/IndustrialDashboard.js" type="text/javascript"></script>
    <script src="../Addons/DestinationPDF/Scripts/DestinationPDF.js" type="text/javascript"></script>
    <script src="../Widgets/IndustrialGrid/Scripts/IndustrialGrid.js" type="text/javascript"></script>
    
    <style type="text/css">        
        body{background:#909090; top:0px; left:0px; margin:0px;}
        div.style {width:250px;height:22px;margin-left:55%;margin-top:25px;font-family:Calibri,Microsoft Sans Serif;font-size:12px;position:absolute;}
        .style p {color:#303030;width:95px;float:left;margin-top:4px;}
        .style select{float:left;margin-left:5px;width:120px;font-size:12px;font-family:Calibri,Microsoft Sand Serif;}
        .menuContainer{margin-top:25px;height:auto; width:90%; padding:10px;}
    </style>   
</head>
<body style="">     
   <form id="form" class="floatForm">
        <p>Choose html objects to export to pdf :</p>            
        <input id="atkCheck" type="checkbox" checked="checked"/>Title &nbsp;  <br/>
        <input id="pictureCheck" type="checkbox" checked="checked"/>Image &nbsp; <br/>
        <input id="IGCheck" type="checkbox" checked="checked"/>Industrial Grid &nbsp; <br/>
        <input id="textPDFCheck" type="checkbox" checked="checked"/>Text &nbsp; <br/>
        <br />
        <center><input type="button" value="Generate PDF" onclick="submitData()"/></center>
    </form>
    <center>
        <div class="template">
            <center>
                <div class="title">Destination PDF Example</div>
                <div class="sample">
                    <div class="globalContainer">
                        <div id="atkContainer">                        
                            <div class="atk">
                                <div>
                                    <div class="atkLogoContainer">
                                        <img src="../Addons/DestinationPDF/Styles/ImagesDestinationPDF/atk_logo.png" alt=""/>
                                    </div>                                   
                                </div>
                                <div class="atkTitle">AustralTek is a US based company dedicated to developing industry solutions.</div>
                            </div>
                        </div>
                        <div id="pictureImageContainer">
                            <img id="pictureImage" class="pictureImages" src="../Addons/DestinationPDF/Styles/ImagesDestinationPDF/pdfImage.jpg" alt=""/>
                        </div>
                        <div id="pIG" style="position:relative;margin:20px;"></div>

                        <div id="textPDFContainer" class="textPDFContainers">
                            <div>Edit this text if you wish :</div>
                            <textarea id="textPDF" rows=10 cols=70>
                               AustralTek is a US based company dedicated to developing industry solutions in the areas of Electrical Engineering, Automation and Industrial IT.
                               We utilize state of the art technology to produce tools that help optimizing the different production areas in a plant.
                               We are specialists in technological upgrades and in the integration of existing systems with superseded platforms, thus obtaining more accurate data and homogenizing plant information flow.                
                            </textarea>
                        </div>
                    </div>
                </div>
                <div class="content" style='text-align:left;padding:20px'>
                <p> In this example, the javascript code needed to export some widgets to pdf is:  </p>
                <pre style=' background-color:#E0E0F0'>

               var destinationPdf = new DestinationPDF({ 'URL': '../DALService.svc/ExportTo' });

                var titlePDFWidget = new PdfWidget({ 'NameSpace': 'DestinationPDF', 'ClassName': 'HTMLStruct' });
                titlePDFWidget.SetContent({ 'HTMLString': getHtmlString(document.getElementById('atkContainer').innerHTML)
                                            , 'URL': window.location.href });
                destinationPdf.AddPdfWidget(titlePDFWidget);

                var picturePDFWidget = new PdfWidget({ 'NameSpace': 'DestinationPDF', 'ClassName': 'HTMLStruct' });
                picturePDFWidget.SetContent({ 'HTMLString': getHtmlString(document.getElementById('pictureImageContainer').innerHTML)
                                            , 'URL': window.location.href });
                destinationPdf.AddPdfWidget(picturePDFWidget);

                if (document.getElementById('IGCheck').checked == true) {
                    var tablePDFWidget = new PdfWidget({ 'ClassName': 'IndustrialGrid' });
                    tablePDFWidget.SetContent({ 'HTMLString': getHtmlString(document.getElementById('pIG').innerHTML)
                                                , 'URL': window.location.href, 'Width': 500, 'Height': 400 });
                    destinationPdf.AddPdfWidget(tablePDFWidget);
                }

                var pdfWidget = new PdfWidget({ 'NameSpace': 'DestinationPDF', 'ClassName': 'HTMLText' });
                pdfWidget.SetContent({ 'value': document.getElementById('textPDF').value });
                destinationPdf.AddPdfWidget(pdfWidget);

                destinationPdf.SendData();
                </pre>
                </div>
            </center>
        </div>
        <!--<form enctype'></form>-->
    </center>

    <script type="text/javascript">
        //Set Initial Options, using "GetFile" method and setting the JSON file full path.
        var options = { 'URL': '../DALService.svc/GetFile', 'JSONFile': 'Widgets/IndustrialGrid/Test/IndustrialGridData.json' };
        //Create an Instance of TabularReport
        var ig = new IndustrialGrid(document.getElementById('pIG'), options);
        //Refresh Widget
        ig.RefreshData();

        submitData = function () {
            try {
                /*
                The Destination PDF library can export to pdf all what you want.
                First, you have to instance the Javascript Destination PDf Class and then push it some PDF Widgets objects.
                For the PDf WIdgets you have to set their "content" depending what they are because the structure what you set then
                will be 'Deserialize it" to a C# Class Object.
                This last has to implement the "Destiantion PDF Interface". In the "DrawToPDF" method of that interface each object to export
                has to have how it export to pdf itself, using the PDFSharp and Migradoc Libraries.
                */

                //Instance the Destination PDf Class, with the URL what procces the data and build the pdf file.
                var destinationPdf = new DestinationPDF({ 'URL': '../DALService.svc/ExportTo' });

                //Only send the widgets what the user has been chosen.
                if (document.getElementById('atkCheck').checked == true) {
                    //Instance the PDf Widget Class, with the type of the widget to export to pdf.
                    var titlePDFWidget = new PdfWidget();
                    //Set the contetn of the widget to eport depending its type.
                    titlePDFWidget.SetContent({ 'HTMLString': getHtmlString(document.getElementById('atkContainer').innerHTML), 'URL': window.location.href });
                    destinationPdf.AddPdfWidget(titlePDFWidget);
                }

                if (document.getElementById('pictureCheck').checked == true) {
                    var picturePDFWidget = new PdfWidget();
                    picturePDFWidget.SetContent({ 'HTMLString': getHtmlString(document.getElementById('pictureImageContainer').innerHTML), 'URL': window.location.href });
                    destinationPdf.AddPdfWidget(picturePDFWidget);
                }

                if (document.getElementById('IGCheck').checked == true) {
                    var tablePDFWidget = new PdfWidget();
                    tablePDFWidget.SetContent({ 'HTMLString': getHtmlString(document.getElementById('pIG').innerHTML)
                                                , 'URL': window.location.href, 'Width': 500, 'Height': 400 });
                    destinationPdf.AddPdfWidget(tablePDFWidget);
                }

                if (document.getElementById('textPDFCheck').checked == true) {
                    var pdfWidget = new PdfWidget({ 'NameSpace': 'DestinationPDF', 'ClassName': 'HTMLText' });
                    pdfWidget.SetContent({ 'value': document.getElementById('textPDF').value });
                    destinationPdf.AddPdfWidget(pdfWidget);
                }

                destinationPdf.SendData();
            }
            catch (Error) { window.status = Error.Message; }
        }
    </script>
</body>
</html>